基礎佈局網格與材質(指南)
網格佈局 Layout Grids
錶盤式檢視(Dial-based Views)、資訊圖檢視(Infographic Views) 和 列表檢視(Lists)
/image.png)
1 錶盤式檢視(Dial-based Views)
適合展示密集資訊,讓使用者快速獲取資料。全屏的顏色和影象(如天氣)能增強介面的視覺效果。
錶盤檢視 還允許你在四個角落新增最多 4 個互動控制元件,同時不會遮擋主要內容。
/image 1.png)
2資訊圖檢視(Infographic Views)
適用於圖表、統計資料和視覺化資訊,通常搭配文字和指標資料,以提供更完整的資訊展示。
/image 2.png)
3 列表檢視(Lists)
適用於滾動瀏覽內容,讓使用者快速找到所需的資訊。
/image 3.png)
這套網格系統,是為了充分利用每一個畫素,並確保 Apple Watch 所有應用的體驗更加一致和可預測。
https://developer.apple.com/design/resources/#watchos-apps
/image 4.png)
顏色和材質 materials and color
其中一個重要的設計目標,就是透過全屏顏色和影象來突出螢幕的形態和高精度顯示效果。
/image 5.png)
1 四種全屏材質背景:
超薄(Ultra Thin)、薄(Thin)、普通(Regular)和厚(Thick)
2 全屏背景漸變色
在健身應用中,我們使用主題色來區分 “移動”、“鍛鍊” 和 “站立” 這三個頁面,它們的佈局相似,但顏色不同,便於使用者快速識別。
/image 6.png)
顏色能幫你秒懂資訊!在"世界時鐘"裡,早晨顯示黃色,晚上顯示深藍色。顏色也能表示狀態變化,比如計時器從黑色倒計時變成亮橙色提醒。
3 活力填充材質(Vibrant Fill Materials)
適用於控制元件 和 資訊卡片,同時引入了 四個不同層級的文字樣式,包括:
- 主要(Primary)
- 次要(Secondary)
- 三級(Tertiary)
- 四級(Quaternary)
/image 7.png)
4 全屏模糊材質(Full-Screen Thin Material)
帶有輕微透明度的背景模糊效果,可以在彈出視窗或過渡頁面中使用。讓使用者更清楚自己處於哪個介面,不會迷失方向
5 導航欄“動態模糊”效果:
你滾動介面時,導航欄下方的內容會逐漸變模糊,而不是突然被“硬切換”掉。這樣可以讓使用者更專注於當前閱讀的內容,同時仍然知道導航欄的位置。